<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript05브라우저객체</title>
	</head>
	<body>
		<h1>브라우저객체(BOM)</h1>
		<p>자바스크립트를 통해 브라우저를 제어할 수 있음</p>
		<p>Window : 브라우저 창(window)을 다루는 객체</p>
		<p>Screen : 브라우저 화면(screen)을 다루는 객체</p>
		<p>Location : 브라우저 위치정보를 다루는 객체</p>
		<p>History : 브라우저 방문정보를 다루는 객체</p>
		<p>Navigator : 브라우저 자체정보를 다루는 객체</p>
		<p>Cookie : 브라우저 쿠키를 다루는 객체</p>
		<p>Timing : 타이머 이벤트를 다루는 객체</p>
		
		<h3>window 객체</h3>
		<p>브라우저 자체를 가리키는 객체 : 최상위 객체 </p>
		<p>window 객체는 모든 브라우저에 지원함</p>
		<p>일반적으로 생략가능하고, 모든 변수, 함수, 객체는 window 객체의 하위요소로 취급할 수 있음</p>
		<p>ex) encodeURI() 는 window.encodeURI() 로도 사용가능</p>
		<p>window.innerWidth : 창 너비(표준)
			<button type="button" onclick="checkwin()">창크기 알아보기</button>
		</p>
		<p>window.innerHeight : 창 높이(표준)</p>
		<p>document.body.clientWidth : 창 너비(IE8 이하)</p>
		<p>document.body.clientHeight : 창 높이(IE8 이하)</p>
		
		<p>window.open( 주소, 창이름, 창속성 ) : 
			<button type="button" onclick="newwin1()">새창띄우기</button>
			<button type="button" onclick="randomwin()">랜덤창띄우기</button>
		</p>
		<p>window.close() :
			<button type="button" onclick="closewin1()">창 닫기</button>
			<button type="button" onclick="stoprandom()">랜덤창 멈추기</button>
		</p>
		<p>window.moveTo( x좌표, y좌표 ) :
			<button type="button" onclick="movewin2()">창이동하기</button>
		</p>
		<p>window.resizeTo( 가로크기, 세로크기 ) :
			<button type="button" onclick="resizewin2()">창크기 변경하기</button>
		</p>
		
		<script type="text/javascript">
			var win1 = null, win2 = null;	// 새 창을 저장하기 위한 변수
			function newwin1() {
				win1 = window.open( "http://google.co.kr", "win1", "width=350, height=250" );
				/* 새창을 띄울때에는 반드시 창이름을 지정할것! */
			}
			function closewin1() {
				win1.close();	// 창닫기
				// window.close();
				// self.close();
			}
			function movewin2() {
				win2 = window.open("about:blank", "win", "width=100, height=100");
				win2.moveTo( 550, 325 );
				win2.focus();
			}
			function resizewin2() {
				win2.resizeTo( 550, 450 );
				win2.focus();
			}
			function randomwin() {
				win3 = window.open("about:blank", "win3", "width=250, height=150");
				timer = setInterval( "makeWin()", 500 );
			}
			function makeWin() {
				win3.resizeTo( Math.random() * 400, Math.random() * 400 );
				win3.moveTo( Math.random() * 900, Math.random() * 900 );
				win3.focus();
			}
			function stoprandom() {
				clearInterval( timer );
				win3.close();
			}
			function checkwin() {
				var result = "창 가로크기 : " + window.innerWidth + "\n창 가로크기 : " + window.innerHeight;
				alert ( result );
			}
		</script>
		<hr />
		
		<h3>Screen</h3>
		<p>screen.availWidth : (방문객 브라우저 화면 가로 크기)
			<button type="button" onclick="showscreen()">최대 화면 크기</button>
		</p>
		<p>screen.availHeight : (방문객 브라우저 화면 세로 크기)</p>
		<p>screen.width : (전체 화면 가로 크기)</p>
		<p>screen.height : (전체 화면 세로 크기)
			<button type="button" onclick="centerscreen();">화면 정중앙에 창(300x200) 띄우기</button>
		</p>
		<script type="text/javascript">
			function showscreen() {
				var result = "브라우저 가로 화면 : " + screen.availWidth + "\n브라우저 세로 화면 : " + screen.availHeight
				+	"\n가로 화면 크기 : " + screen.width + "\n세로 화면 크기 : " + screen.height;
				alert( result );
			}
			function centerscreen() {
				var cw = screen.width / 2;
				var ch = screen.height / 2;
				var mywin = window.open("about:blank", "my", "width=300, height=200");
				mywin.moveTo( cw-150, ch-100 );
			}
		</script>
		<hr />
		
		<h3>Location</h3>
		<p>브라우저 현재 페이지의 주소URL을 알아내거나 <br /> 브라우저에게 새로운 페이지로 이동하라고 지시할 수 있음</p>
		<p>location.hostname : 호스트 정보</p>
		<p>location.pathname : 현재 페이지 경로</p>
		<p>location.port : 현재 페이지 포트번호</p>
		<p>location.protocol : 현재 페이지 프로토콜</p>
		<p>location.href : 현재 페이지 URL
			<button type="button" onclick="go2page();">새로운 페이지로 이동</button>
		</p>
		<script type="text/javascript">
			document.write( location.hostname + "<br />");
			document.write( location.pathname + "<br />");
			document.write( location.port + "<br />");
			document.write( location.protocol+ "<br />");
			document.write( location.href + "<br />");
			function go2page() {
				location.href = "http://google.co.kr/";
			}
		</script>
		<hr />
		<h3>navigator</h3>
		<p>방문자 브라우저의 정보로 구성된 객체</p>
		<p>navigator.appCodeName : 브라우저 코드네임</p>
		<p>navigator.appName : 브라우저 이름</p>
		<p>navigator.appVersion : 브라우저 버전</p>
		<p>navigator.platform : 운영체제 환경</p>
		<p>navigator.userAgent : 방문자 브라우저 정보</p>
		
		<script type="text/javascript">
			var result = navigator.appCodeName;
			result += "<br />" + navigator.appName;
			result += "<br />" + navigator.appVersion;
			result += "<br />" + navigator.platform;
			result += "<br />" + navigator.userAgent;
			document.write( result + "<br />");
			var ua = navigator.userAgent;
			if ( ua.indexOf( "OPR" ) > -1 )
			document.write( "오페라를 사용하는군요!" );
			else if ( ua.indexOf( "Chrome" ) > -1 )
			document.write( "크롬을 사용하는군요!" );
			else if ( ua.indexOf( "Firefox" ) > -1 )
			document.write( "파폭을 사용하는군요!" );
			else if ( ua.indexOf( "MSIE" ) > -1 )
			document.write( "IE를 사용하는군요!" );
			else if ( ua.indexOf( "rv:11.0" ) > -1 )
			document.write( "IE 11을 사용하는군요!" );
			else
			document.write( "기타 브라우저를 사용하는군요!" );
		</script>
	</body>
</html>